<template>
  <div class="wrap headlines">
    <!-- 滚动通告 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- nav -->
      <van-tabs v-model="activeName" color="#FA4B36">
        <van-tab title="物业公告" name="a">
          <!-- 消息主体 -->
          <div class="main">
            <div
              class="notify"
              v-for="item in list"
              :key="item.news_id"
              @click="toLine(item.news_id)"
            >
              <p>{{ item.news_tit }}</p>
              <van-icon name="arrow" />
            </div>
          </div>
        </van-tab>
        <van-tab title="热点新闻" name="b">
          <!-- 新闻主体 -->
          <div
            class="content"
            v-for="(item,index) in newList"
            :key="item.index"
            @click="toNew(item,index)"
          >
            <div class="new">
              <p>{{ item.title }}</p>
              <img :src="item.img" alt="" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getNewsList, getHotspotList } from "../api/api";
export default {
  // 定义属性
  name: "Headlines",
  data() {
    return {
      // id: null,
      activeName: "a",
      count: 0,
      isLoading: false,
      list: [],
      newList: [],
    };
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    toLine(news_id) {
      this.$router.push({ path: "/headlineDetail", query: { news_id: news_id } });
    },
    toNew(item) {
      this.$router.push({ path: "/hotspotDetail", query: { id: item.id } });
    },
    getList() {
      getNewsList().then((res) => {
        console.log(res.data);
        this.list = res.data;
        console.log(this.list);
      });
    },
    getHotspotList() {
      getHotspotList().then((res) => {
        this.newList = res.data;
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
    this.getHotspotList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
.headlines {
  ::v-deep .van-tabs__line {
    width: 100px;
  }
  .main {
    padding: 10px;
    background-color: #f5f5f5;
    .notify {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      margin: 10px 0;
      background-color: #fff;
      p {
        font-size: 16px;
      }
      .van-icon {
        font-size: 16px;
        color: #666;
        margin-left: 20px;
      }
    }
  }
  .content {
    padding: 10px;
    margin: 10px;
    box-shadow:4px 4px 5px #ccc;   
    .new {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 120px;
        height: 90px;
      }
    }
  }
}
</style>
